<template>
  <div class="editIntro">
    <van-popup :value="userIntro" position="right" @open="handleOpen">
      <van-nav-bar
        title="修改个性签名"
        left-text=""
        right-text="保存"
        left-arrow
        @click-left="handleBack"
        @click-right="onClickRight"
      />
      <van-form ref="form">
        <van-field
          v-model="userinfoIntros"
          placeholder="请输入内容"
          :rules="rules"
        />
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { auEdit } from '@/api/my.js'
export default {
  name: 'EditIntro',
  props: {
    userIntro: {
      type: Boolean,
      default: false
    },
    userinfoIntro: {
      type: String,
      default: ''
    }
  },
  model: {
    prop: 'userIntro'
  },
  data () {
    return {
      userinfoIntros: '',
      rules: [
        {
          validator: (newIntro) => {
            return newIntro.length < 15
          },
          message: '最大长度为15个字',
          trigger: 'onChange'
        }
      ]
    }
  },

  methods: {
    onClickRight () {
      this.$refs.form
        .validate()
        .then(() => {
          const aferEditIntro = this.userinfoIntros || '该用户很懒,什么也没写'
          auEdit({ intro: aferEditIntro })
          this.$toast.success('修改成功')
        })
        .catch(() => {})
    },
    // 打开弹窗
    handleOpen () {
      this.userinfoIntros = this.userinfoIntro
      this.beforeEditIntor = this.userinfoIntro
    },
    // 关闭弹窗
    handleBack () {
      this.$emit('refreshPage')
      this.$emit('input', false)
    }
  }
}
</script>

<style lang="less" scoped>
.van-popup {
  width: 100%;
  height: 100%;
}
::v-deep .van-field__control {
  margin-top: 20px;
  height: 80px;
  background-color: #f7f4f5;
}
</style>
